<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    :collapse="bool"
    :router="true"
    unique-opened
    active-text-color="#ffd04b"
  >
    <!-- <el-menu-item index="/home/shouye"> -->
    <!-- <el-menu-item index="1" @click="shouye()"> -->
      <!-- <i class="el-icon-menu"></i>
      <span slot="title">首页</span>
    </el-menu-item> -->
    <el-menu-item :index="v.path" v-for="(v) in routerdata" :key="v.path" @click="addTab(v.meta.title)" >
      <template slot="title">
        <i :class="v.icon"></i>
        <span>{{ v.meta.title }}</span>
      </template>
      <!-- <el-menu-item-group class="yzxx">
        <el-menu-item :index="v.pathone">
          <i class="el-icon-view" style="color: grey; margin-right: 10px"></i
          >{{ v.meta.title }}</el-menu-item
        >
      </el-menu-item-group> -->
    </el-menu-item>
    
   
  </el-menu>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
    data() {
    return {
      texta: "已维修列表",
      textb: "未维修列表",
      textc: "员工列表",
      textd: "查看业主信息",
      texte: "修改业主信息",
      textf: "物业费管理",
      textg: "水费管理",
      texth: "电费管理",
      texti: "停车费管理",
      textj: "房屋列表",
    };
  },
  computed: {
    ...mapState({
      data: (state) => state.pm,
      bool: (state) => state.pm.bool,
      text: (state) => state.pm.editableTabs,
      routerdata:state=>state.routerlist
    }),
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    ...mapMutations(["Add_Tab", "APP_UPDATA_BOOL"]),
    addTab(val) {
      this.Add_Tab(val);
    },
  },
  created () {
    //判断是否有store这个本地存储的数据
    if (sessionStorage.getItem("store") ) {
      // 如果有  那么把vuex的数据替换  把当前的state  和上次刷新存储的state合并起来
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
        sessionStorage.removeItem("store")
    } 
 
    //在页面监听绑定一个beforeunload事件（页面刷新事件）
    // 当页面刷新的时候使用本地存储存一个store的数据  把vuex的数据全部取出来 转成字符串存起来
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>